@import url("/resources/src/css/daterangepicker.css");

.daterangepicker .calendar th, 
.daterangepicker .calendar td{
    min-width:26px!important;
}

.daterangepicker.ltr .ranges{
    display:block;
    float:none!important;
    text-align:center!important;
}

.daterangepicker.ltr .ranges:before{
    display:block;
    content:"";
    height:0;
    visibility: hidden;
    clear:both;
    
}

$mainColor:#23a8f5;
$white:#fff;
$borderColor:#e4e4e4;

.toolbar-left{
    width:165px; 
    height:35px; 
    overflow:hidden;
    text-align:left;
}

.toolbar-right a,
.toolbar-left a{
    background-color:$mainColor;
    color:$white;
    display:inline-block;
    width:70px;
    height:35px;
    line-height:35px;
    text-align:center;
    border-radius:4px;
    cursor:pointer;
    
    &:hover{opacity:0.8;}
}

.toolbar-one{width:70px; margin-right:20px;}

.toolbar-right{
    input{
        outline:0;
        border:1px solid #999;
        border-radius:4px;
        height:35px;
        
        &:focus{
            border-color:$mainColor;
            box-shadow:0 0 3px $mainColor;
        }
    }
    
    input:first-child{width:284px;}
    input:last-child{width:368px;}
    
    .marleft{margin-left:50px;}
    
    .icon-rili{
        transform: scale(1.3,1.3);
        -webkit-transform: scale(1.3,1.3);
        -moz-transform: scale(1.3,1.3);
        -ms-transform: scale(1.3,1.3);
        
    }
}

#search{width:286px;}
#date{width:370px;}
label.icon-rili{
    position:absolute;
    right:15px;
    top:4px;
    font-size:20px;
    font-weight:100;
    color:#999;
    
    &:hover{
        color:$mainColor;
        cursor:pointer;
    }
    
}

.table>tbody>tr>td, 
.table>thead>tr>th{
    padding:0;
    vertical-align:middle;
    text-align:center;
    white-space:nowrap;
    padding-left:15px;
    padding-right:15px;
}

.table>thead>tr>th{
    height:50px;
    background-color:#2F2F2F;
    color:$white;
    border:1px solid #2F2F2F;
    
    i{
        display:inline-block;
        padding-left:5px;
        font-size:14px;
        cursor:pointer;
        transform: scaleX(1.2);
        -webkit-transform: scaleX(1.2);
        -moz-transform: scaleX(1.2);
        -ms-transform: scaleX(1.2);
    }
}

.table>tbody>tr>td{
    height:45px;
    border:1px solid $borderColor;
    
    a{
        padding-left:10px;
        padding-right:10px;
        cursor:pointer;
    }
}

.user-table{margin-top:20px;}

[data-toggle="joDropdown"]{
    position:relative;
    
    ul[data-toggle="joMenu"]{
        width:100%;
        border:1px solid $borderColor;
        border-width:0 1px 1px 1px;
        background-color:$white;
        box-shadow:0 0 8px #333;
        position:absolute;
        top:100%;
        left:0;
        margin-top:1px;
        display:none;
        
        li>a{
            display:block;
            width:100%;
            height:30px;
            line-height:30px;
            
            &:hover{
                color:$white;
                background-color:$mainColor;
            }
        }
    }
}

#qrcode-modal{
    
    .joModal-content{
        width:270px;
        height:327px;
        overflow:visible;
    }
    
    .joModal-header{
        width:30px;
        height:30px;
        border-radius:50%;
        background-color:#2f2f2f;
        position:absolute;
        right:-15px;
        top:-15px;
        box-shadow:0 0 10px #000;
        color:$white;
        display:table-cell;
        vertical-align: middle;
        
        &:hover{color:$mainColor;}
        
        i{
            font-size:20px; 
            cursor:pointer;
        }
    }
    
    .joModal-body img{
        margin-top:40px;
        margin-bottom:30px;
    }
} 

#unbind-modal{
    
    .joModal-body img{
        margin-top:40px;
        margin-bottom:30px;
    }
} 